<template>


  <section :style="{ 'background-image': 'url(' + bgpic + ')' }" class="bg-cover bg-center bg-no-repeat relative">
    <div
      class="absolute inset-0 bg-white/75 sm:bg-transparent sm:from-white/95 sm:to-white/25 ltr:sm:bg-gradient-to-r rtl:sm:bg-gradient-to-l">
    </div>

    <div class="relative mx-auto max-w-screen-xl px-4 py-32 sm:px-6 lg:flex lg:h-screen lg:items-center lg:px-8">
      <div class="max-w-xl text-center ltr:sm:text-left rtl:sm:text-right">
        <h1 class="text-3xl font-extrabold sm:text-5xl">
          <strong class="block font-extrabold  " style="color:#007BFF;">{{ companyName }}</strong>
        </h1>

        <p class="mt-4 max-w-lg sm:text-xl/relaxed">
          {{ description }}
        </p>

        <div class="mt-8 ml-16 flex flex-wrap gap-4 text-center">
          <a @click='torout(oneBtn.link)'
            class="block w-full rounded px-12 py-3 text-sm font-medium text-white shadow hover:bg-rose-700 focus:outline-none focus:ring active:bg-rose-500 sm:w-auto"
            style="color:#fff;background-color: #007BFF">
            {{ oneBtn.text }}
          </a>

          <a @click='torout(twoBtn.link)'
            class="block w-full rounded bg-white px-12 py-3 text-sm font-mediumshadow hover:text-rose-700 focus:outline-none focus:ring active:text-rose-500 sm:w-auto"
            style="color: #007BFF;">
            {{ twoBtn.text }}
          </a>
        </div>
      </div>
    </div>
  </section>

  <div class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
    <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
      <div>
        <p
          class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-accent-400">
          Brand new
        </p>
      </div>
      <h2
        class="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 sm:text-4xl md:mx-auto">
        <span class="relative inline-block">
          <svg viewBox="0 0 52 24" fill="currentColor"
            class="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block">
            <defs>
              <pattern id="18302e52-9e2a-4c8e-9550-0cbb21b38e55" x="0" y="0" width=".135" height=".30">
                <circle cx="1" cy="1" r=".7"></circle>
              </pattern>
            </defs>
            <rect fill="url(#18302e52-9e2a-4c8e-9550-0cbb21b38e55)" width="52" height="24"></rect>
          </svg>
          <!-- <span class="relative">The</span> -->
        </span>

        我们的宗旨
      </h2>
      <p class="text-base text-gray-700 md:text-lg">
        服务好每一个客户，让天下没有难做的甲方
      </p>
    </div>
    <div class="grid gap-4 row-gap-5 sm:grid-cols-2 lg:grid-cols-4">
      <div class="flex flex-col justify-between p-5  rounded shadow-md">
        <div>
          <div class="flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-indigo-50">
            <svg class="w-12 h-12 text-deep-purple-accent-400" stroke="currentColor" viewBox="0 0 52 52">
              <polygon stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"
                points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
            </svg>
          </div>
          <h3 class="mb-2 font-semibold leading-5">GIS平台</h3>
          <p class="mb-3 text-sm text-gray-900">
            数据是最好的科技信息，运营数据，拥抱明天。美好生活每一天
          </p>
        </div>
        <a aria-label=""
          class="inline-flex items-center font-semibold transition-colors duration-200 text-deep-purple-accent-400 hover:text-deep-purple-800">查看更多</a>
      </div>
      <div class="flex flex-col justify-between p-5  rounded shadow-md">
        <div>
          <div class="flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-indigo-50">
            <svg class="w-12 h-12 text-deep-purple-accent-400" stroke="currentColor" viewBox="0 0 52 52">
              <polygon stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"
                points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
            </svg>
          </div>
          <h3 class="mb-2 font-semibold leading-5">支撑平台</h3>
          <p class="mb-3 text-sm text-gray-900">
            数据是最好的科技
          </p>
        </div>
        <a aria-label=""
          class="inline-flex items-center font-semibold transition-colors duration-200 text-deep-purple-accent-400 hover:text-deep-purple-800">查看更多</a>
      </div>
      <div class="flex flex-col justify-between p-5  rounded shadow-md">
        <div>
          <div class="flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-indigo-50">
            <svg class="w-12 h-12 text-deep-purple-accent-400" stroke="currentColor" viewBox="0 0 52 52">
              <polygon stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"
                points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
            </svg>
          </div>
          <h3 class="mb-2 font-semibold leading-5">业务平台</h3>
          <p class="mb-3 text-sm text-gray-900">
            数据是最好的科技
          </p>
        </div>
        <a aria-label=""
          class="inline-flex items-center font-semibold transition-colors duration-200 text-deep-purple-accent-100 hover:text-deep-purple-600">查看更多</a>
      </div>
      <div class="flex flex-col justify-between p-5  rounded shadow-md">
        <div>
          <div class="flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-indigo-50">
            <svg class="w-12 h-12 text-deep-purple-accent-400" stroke="currentColor" viewBox="0 0 52 52">
              <polygon stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"
                points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
            </svg>
          </div>
          <h3 class="mb-2 font-semibold leading-5">数据中台</h3>
          <p class="mb-3 text-sm text-gray-900">
            数据是最好的科技
          </p>
        </div>
        <a aria-label=""
          class="inline-flex items-center font-semibold transition-colors duration-200 text-deep-purple-accent-400 hover:text-deep-purple-800">查看更多</a>
      </div>
    </div>
  </div>
  <!--  介绍 -->
  <div class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-5">
      <div class="grid gap-6 md:grid-cols-2 md:col-span-2 lg:col-span-3">
        <div class="rounded lg:p-5 lg:transition lg:duration-300 lg:hover:bg-indigo-50">
          <div class="flex items-center mb-1">
            <span
              class="flex items-center justify-center w-4 h-4 mr-2 text-xs font-medium text-white rounded bg-deep-purple-accent-400">1</span>
            <p class="text-lg font-semibold sm:text-base">用户平台</p>
          </div>
          <p class="text-sm text-gray-900">
            每年超过3千万人访问
          </p>
        </div>
        <div class="rounded lg:p-5 lg:transition lg:duration-300 lg:hover:bg-teal-50">
          <div class="flex items-center mb-1">
            <span
              class="flex items-center justify-center w-4 h-4 mr-2 text-xs font-medium text-teal-900 rounded bg-teal-accent-400">2</span>
            <p class="text-lg font-semibold sm:text-base">
              用户平台
            </p>
          </div>
          <p class="text-sm text-gray-900">
            每年超过3千万人访问
          </p>
        </div>
        <div class="rounded lg:p-5 lg:transition lg:duration-300 lg:hover:bg-teal-50">
          <div class="flex items-center mb-1">
            <span
              class="flex items-center justify-center w-4 h-4 mr-2 text-xs font-medium text-white rounded md:text-teal-900 bg-deep-purple-accent-400 md:bg-teal-accent-400">3</span>
            <p class="text-lg font-semibold sm:text-base">
              用户平台
            </p>
          </div>
          <p class="text-sm text-gray-900">
            每年超过3千万人访问，最大的中文科技平台
          </p>
        </div>
        <div class="rounded lg:p-5 lg:transition lg:duration-300 lg:hover:bg-indigo-50">
          <div class="flex items-center mb-1">
            <span
              class="flex items-center justify-center w-4 h-4 mr-2 text-xs font-medium text-teal-900 rounded md:text-white bg-teal-accent-400 md:bg-deep-purple-accent-400">4</span>
            <p class="text-lg font-semibold sm:text-base">用户平台</p>
          </div>
          <p class="text-sm text-gray-900">
            每年超过3千万人访问
          </p>
        </div>
      </div>
      <div class="relative md:col-span-2 lg:col-span-2">
        <img class="inset-0 object-cover object-bottom w-full h-56 rounded shadow-lg lg:absolute lg:h-full"
          src="https://images.pexels.com/photos/3182759/pexels-photo-3182759.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260"
          alt="" />
      </div>
    </div>
  </div>

  <!-- status -->
  <div class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
    <div class="grid grid-cols-2 row-gap-8 md:grid-cols-4">
      <div class="text-center">
        <h3 class="text-3xl font-bold text-deep-purple-accent-400">144K</h3>
        <p class="font-bold">访问量</p>
      </div>
      <div class="text-center">
        <h3 class="text-3xl font-bold text-deep-purple-accent-400">32.1K</h3>
        <p class="font-bold">用户</p>
      </div>
      <div class="text-center">
        <h3 class="text-3xl font-bold text-deep-purple-accent-400">1.9K</h3>
        <p class="font-bold">今日访问</p>
      </div>
      <div class="text-center">
        <h3 class="text-3xl font-bold text-deep-purple-accent-400">24.5K</h3>
        <p class="font-bold">本月访问</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { getOneSetting, getSettings } from '@/api/setting';
import { onMounted, ref } from 'vue';
import { useRouter } from "vue-router";
const router = useRouter();
const infos = ref({});
onMounted(() => {

  getOneSetting('name').then(res => {
    console.log(res);
    if (res.data.code == 200) {
      companyName.value = res.data.data;
      console.log(companyName.value);
    }
  });
  getOneSetting('description').then(res => {
    if (res.data.code == 200) {
      description.value = res.data.data;

    }
  });
  getSettings(['Index_pc_bg', 'Index_pe_bg', 'Index_btns']).then((res) => {
    console.log(res);
    infos.value = res.data.data;
    infos.value.Index_btns = JSON.parse(infos.value.Index_btns);
    oneBtn.value = infos.value.Index_btns[0];
    twoBtn.value = infos.value.Index_btns[1];
    getWidth();
  });

});
const oneBtn = ref({});
const twoBtn = ref({})
const phoneOrPc = ref(false);
const bgpic = ref('')
const getWidth = () => {
  let screenWidth = window.innerWidth;
  console.log('屏幕宽度:', screenWidth);
  if (screenWidth < 768) {
    phoneOrPc.value = true;
    bgpic.value = infos.value.Index_pe_bg
  } else {
    phoneOrPc.value = false;
    bgpic.value = infos.value.Index_pc_bg
  }
}
const torout = (a) => {
  router.push({ path: a });
}
const companyName = ref('');
const description = ref('');

</script>